<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="js/eslserver-common.js" type="text/javascript"></script>
<script src="js/eslserver-dialogObj.js" type="text/javascript"></script>
<script src="js/eslserver-fileupload.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/eslserver-main.css" rel="stylesheet"></link>

<title>Manage Coordinator</title>

<script>
    var coordinatorID = getFromAttribute(${coordinatorID});
    if(!coordinatorID) {
    	coordinatorID = getFromAttribute(${param.coordinatorID});
    }
    
    $(document).ready(function() {
		$("#container").addClass("ui-widget");

		$("#coordinatorID").attr("value", coordinatorID);
		
		loadCoordinatorInfoForm();
		
		$("#resetActButn").click(function() {
			$("#updateActButn").attr("disabled", true);
			$("#addActButn").removeAttr("disabled");

		});

		$("#backToMain").attr("value", "Back to Main");
		$("#backToMain").click(function(evt) {
			evt.preventDefault();
			window.top.location.href = "MainDashboard.jsp?tabID=1";
		});
		
		
		$.validator.addMethod("IP4Checker", function(value) {
            var ip = "^((0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})\\.){3}(0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})$";
                return value.match(ip);
        }, "Invalid IP address");

        $("#main").validate({
            rules: {
            	
            	coordinatorName: {
            		 required: true,     
            	},
            	
            	coordinatorIP: {
                    required: true,
                    IP4Checker: true
                },
            	
            	coordinatorPort: {
                    required: true,
                    digits: true,
                    min: 1
                }
            }
        });
		
	});
	
	function loadCoordinatorInfoForm() {
		if(!coordinatorID){
			$("#updateActButn").hide();
			
			$("#addActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddCoordinator.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		} else {
			$.getJSON("/eslserver/LoadCoordinatorInfo.do?coordinatorID=" + coordinatorID, function(data) {
				$("#coordinatorID").val(data.coordinatorID);
				$("#coordinatorName").val(data.name);
				$("#coordinatorIP").val(data.ipAddress);
				$("#coordinatorPort").val(data.port);
				$("#coordinatorDescription").val(data.description);			
			})
			
			$("#addActButn").hide();
			
			$("#updateActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddCoordinator.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		}
	}
	
</script>
</head>
<body id="container">
	<fieldset class="mainFieldSet talentForm">
		<legend class="mainLegend">Coordinator Info</legend>
		<form id="main" accept-charset="UTF-8">
			<table>
				<tr style="display: none">
					<td>Coordinator ID</td>
					<td><input type="text" id="coordinatorID" name="coordinatorID" size="30" />
				</tr>
				<tr>
					<td>Coordinator Name<em> *</em></td>
					<td><input id="coordinatorName" name="coordinatorName" type="text" size="30" />
					</td>
				</tr>
				<tr>
					<td>Coordinator IP Address<em> *</em></td>
					<td><input id="coordinatorIP" name="coordinatorIP" type="text" size="30" />
					</td>
				</tr>
				<tr>
					<td>Coordinator Port<em> *</em></td>
					<td><input id="coordinatorPort" name="coordinatorPort" type="text" size="30" />
					</td>
				</tr>
				<tr>
					<td>Description
					</td>
					<td><textarea id="coordinatorDescription" name="coordinatorDescription"
							rows="3" cols="50" class="expand100-200"></textarea></td>
				</tr>
				<tr>
					<td colspan="2"><input id="addActButn" type="button"
						value="ADD" /> <input id="updateActButn" name="updateActButn"
						type="button" value="UPDATE" /> <input id="resetActButn"
						name="resetActButn" type="reset" value="RESET" /></td>
				</tr>

			</table>
		</form>
	</fieldset>
	<br />

	<div>
		<input type=button id="backToMain" />
	</div>

</body>